<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>帮助中心</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/css/htmleaf-demo.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="<%=basePath%>static/css/paper-collapse.min.css">
<style>
body {
	background-color: #eee;
	font-family: "Open Sans", Calibri, Candara, Arial, sans-serif;
	min-height: 100vh;
}

.container {
	max-width: 50rem;
	margin-right: auto;
	margin-left: auto;
	padding: 2rem;
}

.mt1 {
	margin-top: 1rem;
}

.align-right {
	text-align: right;
}

.mouse-pointer {
	cursor: pointer;
}
</style>
</head>
<body>
	<div class="htmleaf-container">
		<section>
			<div class="container">
				<c:forEach items="${hpList}" var="s" varStatus="z">
					<div class="collapse-card">
						<div class="collapse-card__heading">
							<h4 class="collapse-card__title">
								<i style="color:#fff;background-color:#777;height:32px;width:32px;border-radius:50%;text-align:center;font-size:23px;margin-right: 5px;">${z.index + 1}</i>&nbsp;${s.title }
							</h4>
						</div>
						<div class="collapse-card__body">
							Q：<b>${s.title }</b>
							<p>
							A：${s.content } 
							</p>
							<c:if test="${s.pic!=null&&s.pic!=''}">
								<br/><img src="${s.pic }" style="display: block; max-width: 100%; height: auto;" alt="">
							</c:if>
							<c:if test="${s.url!=null&&s.url!=''}"> 
								<br/><a href="${s.url }">点击此处跳转</a>
							</c:if>
							<div class="collapse-card__close_handler mt1 align-right mouse-pointer">
								<i class="fa fa-chevron-up"></i>
							</div>
						</div>
					</div>
				</c:forEach>
			</div>
		</section>
	</div>
	<script src="<%=basePath%>static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="<%=basePath%>static/js/jquery-2.1.1.min.js"><\/script>')</script>
	<script src="<%=basePath%>static/js/paper-collapse.min.js"></script>
	<script>
		$('.collapse-card').paperCollapse();
	</script>
</body>
</html>
